<template>
  <div class="patientFrom-container" @change="patientMsgone">
    <div class="top-part">
      <div class="tip">您是:</div>
      <ul class="tabStrip">
        <li v-for="(item,index) in tabStrip"
          :class="sourcegroup===index?'active':''"
          :key="index" @click="changeTab(index)">
          {{item}}
          <div v-show="sourcegroup===index" class="checked">
            <img :src = "checkedImg" />
          </div>
        </li>
      </ul>
    </div>
    <!-- 患者来源选项 start -->
      <div class="tab-layout">
        <!-- start layout one -->
        <div class="item1" v-show="sourcegroup===0" >
          <div class="item-title">看门诊时给你的建议是？</div>
          <ul class="form-table">
            <li v-for ="(item,index) in fromValue[sourcegroup]" :key = "index" @click="getType(index)">
              <label>
                <input type="radio" id="index" class="check-box" v-model="pfromInfo" :value="item">
                <label :for="index">
                  <i class="iconfont icon-box-checked"></i>
                </label>
                <span>{{item}}</span>
              </label>
            </li>
          </ul>
          <div class="showdate">
            <div style="text-align:left;">您的问诊日期是？</div>
            <getdate class="getdate" @getTime = "datetime" style="color:#666"></getdate>
          </div>
        </div>
        <!-- end layout one -->
        <!-- start layout two -->
        <div class="item2" v-show="sourcegroup===1">
          <div class="item-title">您当前的状态是?</div>
          <ul class="form-table">
            <li v-for="(item,index) in fromValue[sourcegroup]" :key="index"  @click="getType(index)">
              <label>
                <input type="radio" id="index" name="name1" class="check-box" v-model="pfromInfo" :value="item"/>
                <label :for ="index">
                  <i class="iconfont icon-box-checked"></i>
                </label>
                <span>{{item}}</span>
              </label>
            </li>
          </ul>
        </div>
        <!-- end layout two -->
        <!-- start layout three -->
        <div class="item3" v-show="sourcegroup===2">
          <ul class="form-table">
            <li v-for="(item,index) in fromValue[sourcegroup]" :key="index"  @click="getType(index)">
              <label>
                <input type="radio" id="index" name="name2" class="check-box" v-model="pfromInfo" :value="item"/>
                <label :for="index">
                  <i class="iconfont icon-box-checked"></i>
                </label>
                <span>{{item}}</span>
              </label>
            </li>
          </ul>
          <p>*请选择最符合的一项</p>
        </div>
        <!-- end layout three -->
      </div>
      <!-- 患者来源选项 start -->
  </div>
</template>

<script>
import checkedImg from '@/assets/images/check.png'
import getdate from '@/views/components/getdate/getdate'
export default {
  data () {
    return {
      checkedImg: checkedImg,
      tabStrip: ['门诊患者', '住院患者', '其它来源'],
      sourcegroup: 0,
      fromValue: [
        ['先做检查，拿到检查结果后继续查看', '住院治疗', '用药/门诊小手术/其它治疗', '暂不治疗，定期观察复诊'],
        ['住院中', '已出院'],
        ['会诊', '体检', '义诊', '他人介绍', '以上都不是']
        ],
      // 设置默认值
      pfromInfo: ' ',
      fromzhuyuan: '',
      fromqita: '',
      // 第一步需要上传给服务器的数据，点击下一步的时候，可以先保存在vuex里面，
      patientmsgSource: {
        openid: '',
        // 患者看病时间
        // 从getdate组件里面获取
        seeTime: ''|| new Date(),
        // 获取患者来源的分组的类别，1，2，0
        sourceGroupType: '' || 1,
        // 获取患者来源的分组的名称
        sourceGroupDesc: '门诊患者',
        // 获取患者来源的分组里面选项的类别，0，1，2，3....
        sourceType: '',
        // 获取患者来源的分组里面选项的名称
        sourceDesc: this.pfromInfo || 'dddd'
      }
    }
  },
  methods: {
    // 选择患者来源选项卡标题
    changeTab (key) {
      let that =this
      // sourcegroup用来判断选项卡的第几个layout显示
      this.sourcegroup = key
      // 获取患者来源的分组的名称
      this.patientmsgSource.sourceGroupDesc=this.tabStrip[key]
      // 获得选择来源的类型sourceGroupType，1门诊、2住院患者、0其他
      function groupType () {
        if(that.sourcegroup ===0) return 1
        if(that.sourcegroup ===1) return 2
        else return 0
      }
      this.patientmsgSource.sourceGroupType = groupType()
      this.patientmsgSource.sourceDesc = ''
    },
    // 获取从getdate组件传过来的时间
    datetime (param) {
      this.patientmsgSource.seeTime = param
    },
    // 获取选择的是第几个radio
    getType (index) {
      // 获取患者来源的分组里面选项的类别，0，1，2
      this.patientmsgSource.sourceType = index
      this.patientmsgSource.sourceDesc = this.fromValue[this.sourcegroup][index]
    },
    // 将数据传到患者填写信息的页面
    patientMsgone () {
      this.$emit('getpatientMsgone',this.patientmsgSource)
    }
  },
  components: {
    getdate
  }
}
</script>

<style scoped lang="stylus">
  .patientFrom-container
    font-size: 0.9375rem
    margin-top: 10px
    .top-part
      padding: 0 5px
      .tip
        font-size: 0.9375rem
        margin-left: 6px
      .tabStrip
        display: flex
        margin-top: 10px
        li
          flex: 1
          margin-left: 6px
          border: 1px solid #eeeeee
          text-align:center
          height: 35px
          line-height: 35px
          box-sizing : border-box
          color: #666
          position: relative
          border-radius: 4px
          font-size: 0.9375rem

          &.active
            border: 1px solid #108ee9
            color: #108ee9
            .checked
              width: 12px
              height: 12px
              overflow: hidden
              font-size: 12px
              position: absolute
              line-height: 12px
              bottom:-0px
              right:-0px
              img
                width: 100%
    .tab-layout
      width: 100%
      background: #fff
      box-sizing :border-box
      border-radius : 5px
      padding: 10px
      .item-title
        font-size: 15px
      .form-table
        margin-top: 10px
        padding-bottom: 10px
        color: #666
        font-weight : 340
        li
          margin-top: 10px
          label
            .check-box
              display: none
              &+label
                width:16px
                height: 16px
                display: inline-block
                border: 1px solid #ddd
                background:#fff
                border-radius :50%
                line-height: 20px
                text-align:center
                vertical-align: top
                margin-top: 2px
                i
                  display: none
                  margin-top: -2px
                &+span
                  margin-left: 4px
              &:checked + label
                i
                  color: #108ee9
                  display: block
                &+span
                  color: #108ee9
      .item1
        padding-bottom: 8px
        .form-table
          border-bottom: 1px solid #ddd
          padding-bottom: 15px
        .showdate
          margin-top: 10px
      .item3
        p
          font-size: .8125rem
          color: #e8541e
</style>
